<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css_盒子的外边距_margin合并问题</title>
  <style>

      .box{
          width: 300px;
          height: 300px;
      }
      .box1{
          background-color: yellow;
          margin-bottom: 30px;
      }
      .box2{
          background-color: teal;
          margin-top: 50px;
      }
  </style>
</head>
<body>
<!--
      margin合并问题？
        相邻的元素的margin会进行合并，取一个最大的值。
        解决:
            无需结局，布局的时候相邻的元素进行间距处理时给一个间隔即可。


-->
    <div class="box box1">这是div一号元素</div>
    <div class="box box2">这是div二号元素</div>

</body>
</html>